<template>
  <div style="padding: 0 20px">
    <NavBar :title="infos.realname" />
    <header>
      <div class="topBox">
        <div class="topLeftBox">
          <h1>{{ infos.realname }}</h1>
          <p>
            <span>{{ doctor.title }}</span
            ><span class="isOTC">可开处方</span>
          </p>
          <p>执业编号：{{ doctor.practice_cert_no }}</p>
        </div>
        <div class="topRightBox">
          <img :src="infos.avatar" alt="" />
          <span class="isAuthentication">已认证</span>
        </div>
      </div>
    </header>
    <main>
      <div>
        <h2>个人简历</h2>
        <p>{{ doctor.resume }}</p>
      </div>
      <div>
        <h2>擅长方向</h2>
        <p>{{ doctor.good_at }}</p>
      </div>
    </main>
  </div>
</template>
<script setup>
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { ref, onActivated } from "vue";
import { getDoctorInfos } from "../../API";
import { useCount } from "../../store/index";
import NavBar from "../../components/NavBar.vue";
let store = useCount();
let route = useRoute();

// 存放数据
let infos = ref({});
let doctor = ref({});

// 医生详情接口
let getInfos = async () => {
  let use_id = route.query.user_id;
  let { data } = await getDoctorInfos(use_id);
  infos.value = data.data;
  // console.log(infos.value);
  doctor.value = data.data.doctor;
  console.log(doctor.value);
};
getInfos();

// onActivated(() => {
//   getInfos();
// });
// 解决路由缓存的问题
// onBeforeRouteUpdate(() => {
//   getInfos();
// });
</script>
<style scoped>
header {
  margin: 20px 0 80px 0;
}
.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topRightBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.topLeftBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.topLeftBox h1 {
  margin-bottom: 20px;
}
.isOTC {
  width: 114px;
  height: 36px;
  margin-left: 15px;
  font-size: 20px;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e2edff;
  color: #668df4;
  border-radius: 10px;
}
.topLeftBox p {
  font-size: 28px;
  color: #727272;
}
.topLeftBox p:nth-of-type(1) {
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.topRightBox img {
  width: 108px;
  height: 108px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.isAuthentication {
  width: 114px;
  height: 48px;
  font-size: 26px;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eff8f5;
  color: #1ec7af;
  border-radius: 20px;
}
main p {
  color: #606060;
  font-size: 32px;
  margin: 50px 0;
  line-height: 1.5;
}
</style>